<script setup lang="ts" name="StrReplace">
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { dealText } from '../index'
const props = defineProps(['content'])
const emits = defineEmits(['back'])
/*========================================>( 模型属性 )<========================================*/
//是否显示此模块
const show = ref<boolean>(false)
//本组件表单
const replaceform = ref<{ [key: string]: any }>({
    aim: undefined,
    to: undefined,
    rowType: 0,
    excludeRow: undefined,
    aimRow: undefined,
    aimIndex: undefined,
    aimIndexAutoImprove: false,
    improveCount: 1
})
//是否锁定
const lockStatus = ref<boolean>(false)
/*========================================>( 作用域属性 )<========================================*/
//表单校验规则
const _rules: { [key: string]: any } = {
    aim: [
        { required: true, message: '请输入目标文本', trigger: ['blur', 'change'] }
    ],
    to: [
        { required: true, message: '请输入编辑内容', trigger: ['blur', 'change'] }
    ]
}

/*========================================>( dom属性 )<========================================*/
const domReplaceform = ref()

/*========================================>( 普通方法 )<========================================*/
//关闭modal
const cancel = () => {
    emits('back', {})
}

//重置表单
const resetForm = () => {
    domReplaceform.value?.resetFields()
}

//监听各种操作
const handleSubmit = () => {
    domReplaceform.value.validate((vaild: boolean) => {
        if (vaild) {
            const result = dealText(replaceform.value, props.content, replaceform.value.to)
            proxy?.$modal.notifySuccess('替换成功')
            if (replaceform.value.aimIndexAutoImprove && replaceform.value.aimIndex) {
                //如果开启自增序列，则窗口不关闭，执行后序列增加指定数量
                replaceform.value.aimIndex = Number(replaceform.value.aimIndex) + replaceform.value.improveCount
                emits('back', { result, keep: true })
            } else {
                emits('back', { result, keep: lockStatus.value })
            }
        }
    })
}
//更改锁定状态
const changeLockStatus = () => {
    lockStatus.value = !lockStatus.value
}
/*========================================>( 钩子 )<========================================*/
show.value = true


</script>
<template>
    <el-dialog title="条件替换文本" v-model="show" width="60%" @close="cancel" destroy-on-close draggable :modal-class="lockStatus ? 'lock' : 'unlock'">
        <el-form ref="domReplaceform" :model="replaceform" :rules="_rules" label-width="80px">
            <el-form-item label="替换内容" required prop="to">
                <el-input v-model="replaceform.to" placeholder="请输入替换内容" clearable></el-input>
            </el-form-item>
            <el-form-item label="目标文本" required prop="aim">
                <el-input v-model="replaceform.aim" placeholder="请输入目标文本" clearable></el-input>
            </el-form-item>
            <div style="height:5px;"></div>
            <el-divider content-position="left"><i class="el-icon-caret-bottom"></i> 补充条件</el-divider>
            <div style="height:15px;"></div>
            <el-form-item label="包含行数" required>
                <el-radio v-model="replaceform.rowType" :label="0">全部</el-radio>
                <el-radio v-model="replaceform.rowType" :label="1">奇数行</el-radio>
                <el-radio v-model="replaceform.rowType" :label="2">偶数行</el-radio>
            </el-form-item>
            <el-form-item label="排除行数">
                <el-input v-model="replaceform.excludeRow" placeholder="请输入排除行数，多行使用 / 隔开" clearable></el-input>
            </el-form-item>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="匹配字符">
                        <el-input v-model="replaceform.aimRow" placeholder="请输入匹配字符，此行出现此字符才会执行" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="行内序列">
                        <el-input v-model="replaceform.aimIndex" placeholder="请输入行内序列，即每行第几次出现时执行" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12" v-if="replaceform.aimIndex">
                    <el-form-item label="序列递增">
                        <el-switch v-model="replaceform.aimIndexAutoImprove" active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="递增量" v-if="replaceform.aimIndexAutoImprove && replaceform.aimIndex">
                        <el-input-number v-model="replaceform.improveCount" :min="1" :max="20"
                            label="每次执行增加的序列量"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button :icon="lockStatus ? 'Lock' : 'Unlock'" :type="lockStatus ? 'success' : 'info'"
                    @click="changeLockStatus"></el-button>
                <el-button icon="Refresh" @click="resetForm">重置</el-button>
                <el-button icon="Check" type="primary" @click="handleSubmit()">确
                    定</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss">
.el-overlay.lock {
    background-color: rgba(0, 0, 0, 0.1);
}
</style>
<style lang="scss" scoped></style>